<template>
  <h1>练习</h1>
  <!-- <div>{{ name }}</div>
  <div>{{ age + 111 }}</div>
  <button @click="fn">按钮</button>
  <div ref="div">{{ goods }}</div> -->
  <helloWorld />
</template>

<script>
import {
  inject,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  reactive,
  ref,
  toRefs,
} from "vue";

// import { h } from 'vue';
export default {
  name: "prctive",
  setup() {
    // let name = ref("情为何物，高杆吸库");
    // let age = ref("什么是爱，低杆右塞");
    // console.log(name);
    // let obj = reactive({
    //   goods: "猪猪辉",
    //   price: "666",
    // });

    // function fn() {
    //   name.value = "我是你爸爸";
    //   obj = {
    //     goods: "666",
    //   };
    //   console.log(111 + `${name.value}`);
    // }
    // let price = inject("price");
    // console.log(price);

    // return { name, fn, age, ...toRefs(obj) };

    //返回渲染函数(不推荐使用)
    // return () => {
    //   return h("h1", "三个6");
    // };

    // onBeforeMount(() => {
    //   console.log("挂载前");
    // }),
    //   onMounted(() => {
    //     console.log("挂载后");
    //   }),
    //   onBeforeUpdate(() => {
    //     console.log("更新前");
    //   }),
    //   onUpdated(() => {
    //     console.log("更新后");
    //   }),
    //   () => {
    //     console.log("卸载前");
    //   };
    // onUnmounted(() => {
    //   console.log("卸载后");
    // });
  },
};
</script>
